<template>
	<div>
		<mj-title type="h2" title="List 列表"></mj-title>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML"  name="html">
				<mj-list :data='data'></mj-list>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-list :data='data'>&lt;/mj-list>
					&lt;/template>
					&lt;script>
					export default {
					  data () {
					  return {
					      data:[
					        {title:"来是空言去绝踪，月斜楼上五更钟。",url:'http://www.baidu.com',target:'_blank'},
					        {title:"梦为远别啼难唤，书被催成墨未浓。",url:'http://www.baidu.com',target:'_blank'},
					        {title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。",url:'http://www.baidu.com',target:'_blank'},
					        {title:"刘郎已恨蓬山远，更隔蓬山一万重。",url:'http://www.baidu.com',target:'_blank'},
					      ]
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="显示日期"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML"  name="html">
				<mj-list :data='data2'></mj-list>
				<ul class="page-list">
					<li>data数据源中带有<code>time</code>参数，会自动放置在末尾</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-list :data='data2'>&lt;/mj-list>
					&lt;/template>
					&lt;script>
					export default {
					  data () {
					  return {
						data2:[
							{title:"来是空言去绝踪，月斜楼上五更钟。",time:'2022-6-10'},
							{title:"梦为远别啼难唤，书被催成墨未浓。",time:'2022-6-10'},
							{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。",time:'2022-6-10'},
							{title:"刘郎已恨蓬山远，更隔蓬山一万重。",time:'2022-6-10'},
						]
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>data</td>
					<td>数据源，每条数据的属性，<code>title</code>、<code>url</code>、<code>target</code>、<code>time</code></td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>size</td>
					<td>list列表尺寸，可设置<code>lager</code>、<code>small</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>textoverflow</td>
					<td>内容超出长度显示省略号</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>border</td>
					<td>列表分割线类型，默认灰色线条，可关闭<code>false</code>、虚线<code>dashed</code></td>
					<td>Boolean | String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data () {
		return {
			data:[
				{title:"来是空言去绝踪，月斜楼上五更钟。",url:'http://www.baidu.com',target:'_blank'},
				{title:"梦为远别啼难唤，书被催成墨未浓。",url:'http://www.baidu.com',target:'_blank'},
				{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。",url:'http://www.baidu.com',target:'_blank'},
				{title:"刘郎已恨蓬山远，更隔蓬山一万重。",url:'http://www.baidu.com',target:'_blank'},
			],
			data2:[
				{title:"来是空言去绝踪，月斜楼上五更钟。",time:'2022-6-10'},
				{title:"梦为远别啼难唤，书被催成墨未浓。",time:'2022-6-10'},
				{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。",time:'2022-6-10'},
				{title:"刘郎已恨蓬山远，更隔蓬山一万重。",time:'2022-6-10'},
			]
		}
	},
}
</script>